<template>
    <div>
      <van-sticky>
        <div class="demo-nav" style>
          <div class="demo-nav__title">施工案例详情</div>
          <span @click="shop()" class="demo-nav__back">
            <svg viewBox="0 0 1000 1000" @click="toBack">
              <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
              </path>
            </svg>
          </span>
        </div>
      </van-sticky>

      <van-image width="100%" :src="indexList.casePicurl" />

        <div align="left">
          <el-card>
            <p><b style="font-size: 1.4rem">{{indexList.doorArea}}</b></p><p>&nbsp</p>


            <div v-html="indexList.infoDesc">

            </div>


            <!--<div>
              <div align="center"> <b>案例说明</b> </div>
              <div>
                <div style="padding: 0rem 1rem 0rem 1rem" v-for="(itemproject, indexproject) in indexProject" :key="indexproject">
                  <p> {{itemproject.projectName}}</p>
                </div>
              </div>
            </div>

            <div align="center"> <b>功能区</b> </div>
            <div style="padding: 0rem 1rem 0rem 1rem" v-for="(itemfunction, indexfunction) in indexFunction" :key="indexfunction">
              <p>{{itemfunction.functionalName}}</p>
            </div>-->

          </el-card>
        </div>


    </div>
</template>

<script>
  import { getParticularsId,getProjectId,getFunctionalId } from "@/api/constructionTeam/caseinfo";
    export default {
        name: "CaseDetails",
      data(){
          return{
            indexList: Object,
            indexProject:[], //案例说明集合
            indexFunction:[], //案例功能集合
            constructionId:'',
          }
      },
      created(){
          const caseId = this.$route.query && this.$route.query.caseId;
          const constructionId = this.$route.query && this.$route.query.constructionId;
          this.constructionId = constructionId;
          this.getParticularsId(caseId);
          this.getProjectId(caseId);
          this.getFunctionalId(caseId);
      },
      methods:{

        getParticularsId(caseId){
          getParticularsId(caseId).then(res=>{
            this.indexList = res.data.data;
          })
        },

        getProjectId(caseId){
          getProjectId(caseId).then(res=>{
            this.indexProject = res.data;
          })
        },

        getFunctionalId(caseId){
          getFunctionalId(caseId).then(res=>{
            this.indexFunction = res.data;
          })
        },
        toBack(){
          this.$router.go(-1);//返回上一层
        },

        //返回DecorateACase页面
        shop(){
          this.$router.push({path:"/DecorateACase",query:{constructionId: this.constructionId}});
        },

      }
    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
